<template>
    <tr>
      <td v-show="!is_edit">{{tostudent.id}}</td>
      <td v-show="!is_edit">{{tostudent.name}}</td>
      <td v-show="!is_edit">{{tostudent.stage1}}</td>
      <td v-show="!is_edit">{{tostudent.stage2}}</td>
      <td v-show="!is_edit">{{tostudent.stage3}}</td>
      <td v-show="!is_edit">{{tostudent.stage4}}</td>
      <td v-show="!is_edit">{{tostudent.stage5}}</td>
      <td v-show="!is_edit">{{tostudent.stage6}}</td>

      <td v-show="!is_edit">
          <el-button type="primary" round @click="modify">change</el-button>
      </td>
      <td v-show="!is_edit">
          <el-button type="primary" round @click="culculating">culculate</el-button>
      </td>
      <td v-show="!is_edit">
          <el-button type="danger" round  @click="deletestudent">delete</el-button>
      </td>
      <td v-show="is_edit"><input  type="text" class="w-25" v-model="tostudent.id"/></td> 
      <td v-show="is_edit"><input  type="text" class="w-25" v-model="tostudent.name"/></td>  <!-- w-50 to make the size of input box down to half !-->
      <td v-show="is_edit"><input  type="text" class="w-25" v-model.number="tostudent.stage1"/></td> 
      <td v-show="is_edit"><input  type="text" class="w-25" v-model.number="tostudent.stage2"/></td>
      <td v-show="is_edit"><input  type="text" class="w-25" v-model.number="tostudent.stage3"/></td> <!-- v-model.number to make the input number tansfer to int type or it just str type !-->
      <td v-show="is_edit"><input  type="text" class="w-25" v-model.number="tostudent.stage4"/></td>
      <td v-show="is_edit"><input  type="text" class="w-25" v-model.number="tostudent.stage5"/></td><!-- v-model：实现双向数据绑定，当用户在输入框中修改值时，tostudent 的属性会立即更新 !-->
      <td v-show="is_edit"><input  type="text" class="w-25" v-model.number="tostudent.stage6"/></td>
      <td v-show="is_edit">
          <el-button type="primary" round @click="save">save</el-button>
      </td>
      <td v-show="is_edit">
          <el-button type="danger" round @click="deletestudent">delete</el-button>
      </td>
    </tr>

</template>

<script>
import axios from 'axios'
export default{
  props:["tostudent"],//数据从父组件流向子组件，通过props,JavaScript 中对象是通过引用(地址)传递的，这意味着子组件中的修改会直接影响到父组件中的数据。
  data(){
    return{
      is_edit:false,
      rs:[],
    }
  },
  methods:{
    modify(){
      this.is_edit=true;
    },
    save(){
      axios({
          url:"http://localhost:8080/update",
          method:'POST',
          data:this.tostudent,
      })
      this.is_edit=false;
    },
    deletestudent(){
      axios({
          url:"http://localhost:8080/delete_test",
          method:'POST',
          data:this.tostudent,        
      })
      this.is_edit=false;
      //location.reload();
      getStudents(); 
       //子组件不能直接调用父组件的方法，但可以通过 $emit 事件通知父组件执行操作，或者通过将父组件的方法作为 prop 传递给子组件来实现间接调用。如this.$emit('student-deleted');  触发事件通知父组件
       //或者通过将父组件的方法作为 prop 传递给子组件来实现间接调用。props: {refreshStudents: Function},this.refreshStudents(); 调用父组件传递的方法
    },
    culculating(){
      axios({
        url:"http://localhost:8080/computing",
        method:'POST',
        data:this.tostudent,
      }).then(res=>{
          this.$parent.updateresult(res.data);//子组件调用父组件中的方法
          //紧密耦合：通过 $parent 调用父组件方法会使子组件对父组件的结构和实现有依赖，这样的设计在组件结构发生变化时容易导致代码的难以维护。可复用性差，如果打算重用这个子组件，那么它在其他上下文中可能无法正常工作，因为它依赖于特定的父组件。
          this.$parent.initEcharts(this.tostudent);
      })
    }
  }
}


</script>

<style>

</style>